<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="css/main.css">
  <title>网站首页标题</title>
</head>
<body>
  <!-- 导航条 -->
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="images/logo.jpg" alt="图片描述文字"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item mx-3">
              <a class="nav-link active" aria-current="page" href="#">导航条项目</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown mx-3">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
          <form class="d-flex">
            <button class="btn btn-outline-donate animate__animated animate__heartBeat animate__slower animate__infinite" type="submit">按钮标题</button>
          </form>
        </div>
      </div>
    </nav>
  </div>
  <!-- 焦点图 -->
  <div class="container-fluit">
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://images.unsplash.com/photo-1626515405452-9728f8d67d39?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1770&q=80" class="d-block w-100" alt="图片说明文字">
          <div class="carousel-caption d-none d-md-block">
            <h5 class="fs-2">焦点图标题</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://images.unsplash.com/photo-1606493150743-307dca447793?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2864&q=80" class="d-block w-100" alt="图片说明文字">
          <div class="carousel-caption d-none d-md-block">
            <h5 class="fs-2">焦点图标题</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        
     
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
  <!-- 活动信息 -->
  <section id="recent-events" class="container p-3">
    <h3 class="text-center animate__animated animate__fadeInDown animate__faster mt-3 mb-5">近期活动</h3>
    <div class="row mb-5 pb-3 animate__animated animate__fadeInDown animate__delay">
        <div class="col-md-3">
            <img src="./images/grandmother.jpg" alt="">
        </div>
        <div class="col-md-6 event-info">
            <h4>情系福利院</h4>
            <ul class="list-unstyled text-info">
                <li><i class="fa fa-calendar" aria-hidden="true"></i>2020年3月20日 10：00 - 2020年3月20日 12：00</li>
                <li><i class="fa fa-map-pin" aria-hidden="true"></i>白银市福利院</li>
                <li><i class="fa fa-location-arrow" aria-hidden="true"></i>白银市福利院白银市福利院白银市福利院</li>
            </ul>
            <p>活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字
            </p>
        </div>
        <div class="col-md-3">
            <button type="button" class="btn btn-danger">我要参加</button>
        </div>
    </div>
    <div class="row animated fadeInUp delay-2s mb-5 pb-3">
        <div class="col-md-3">
            <div class="img">
                <img class="img-fluid" src="./images/grandmother.jpg" alt="">
            </div>
        </div>
        <div class="col-md-6 event-info">
            <h4>情系福利院</h4>
            <ul class="list-unstyled text-info">
                <li><i class="fa fa-calendar" aria-hidden="true"></i>2020年3月20日 10：00 - 2020年3月20日 12：00</li>
                <li><i class="fa fa-map-pin" aria-hidden="true"></i>白银市福利院</li>
                <li><i class="fa fa-location-arrow" aria-hidden="true"></i>白银市福利院白银市福利院白银市福利院</li>
            </ul>
            <p>活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字</p>
        </div>
        <div class="col-md-3">
            <button type="button" class="btn btn-danger">我要参加</button>
        </div>
    </div>
    <div class="row animated fadeInUp delay-1s mb-5 pb-3">
        <div class="col-md-3">
            <img src="./images/grandmother.jpg" alt="">
        </div>
        <div class="col event-info">
            <h4>情系福利院</h4>
            <ul class="list-unstyled text-info">
                <li><i class="fa fa-calendar" aria-hidden="true"></i>2020年3月20日 10：00 - 2020年3月20日 12：00</li>
                <li><i class="fa fa-map-pin" aria-hidden="true"></i>白银市福利院</li>
                <li><i class="fa fa-location-arrow" aria-hidden="true"></i>白银市福利院白银市福利院白银市福利院</li>
            </ul>
            <p>活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字活动描述文字</p>
        </div>
        <div class="col-md-3">
            <button type="button" class="btn btn-danger disabled">我要参加</button>
        </div>
    </div>
</section>
  <!-- 会员信息 -->
  <section class="container mt-5 member">
    <h3 class="h3 text-center fs-1">会员</h3>
    <p class="display-4 text-center title-bg d-lg-none d-xl-block">BECOME A MEMBER</p>
    <div class="row mt-5">
        <div class="col-md-4">The concern was: How should our church associate with those who are born once
            again, and likewise deeply devoted to the Holy bible in addition to Christ, yet are not yet
            motivated that their child baptism is unbiblical also nullify? Should such followers be admitted in
            some cases to subscription at Bethlehem? Or to put the concern in the bigger standard ways: Should
            the front door of the neighborhood church be approximately the very same dimension as the door to
            the global body of Christ?</div>
        <div class="col-md-4">The concern was: How should our church associate with those who are born once
            again, and likewise deeply devoted to the Holy bible in addition to Christ, yet are not yet
            motivated that their child baptism is unbiblical also nullify? Should such followers be admitted in
            some cases to subscription at Bethlehem? Or to put the concern in the bigger standard ways: Should
            the front door of the neighborhood church be approximately the very same dimension as the door to
            the global body of Christ?</div>
        <div class="col-md-4">The concern was: How should our church associate with those who are born once
            again, and likewise deeply devoted to the Holy bible in addition to Christ, yet are not yet
            motivated that their child baptism is unbiblical also nullify? Should such followers be admitted in
            some cases to subscription at Bethlehem? Or to put the concern in the bigger standard ways: Should
            the front door of the neighborhood church be approximately the very same dimension as the door to
            the global body of Christ?</div>
    </div>
  </section>

  <!-- 联系方式及版权声明 -->
  <section id="contact" class="container-fluid bg-light my-3 pt-5">
    <div class="container">
    <div class="row">
      <div class="col-md-4 text-center">
        <h3>扫码关注</h3>
        <img src="images/qrcode.bmp" alt="二维码">
      </div>
      <div class="col-md-4">
        <h3>联系方式</h3>
        <ul class="list-unstyled">
          <li><i class="bi bi-geo-alt"></i>白银市白银区建设西路9号</li>
          <li><i class="bi bi-geo-alt"></i>(123) 456-78910 - (321) 199-3265</li>
          <li><i class="bi bi-geo-alt"></i>info@example.com</li>
          <li><i class="bi bi-geo-alt"></i>www.example.com</li>
        </ul>
      </div>
      <div class="col-md-4">
        <h3>友情链接</h3>
        <ul class="list-unstyled list-colums">
          <li><i class="bi bi-geo-alt"></i>白银市白银区</li>
          <li><i class="bi bi-geo-alt"></i>(123) 456-78910</li>
          <li><i class="bi bi-geo-alt"></i>白银市白银区</li>
          <li><i class="bi bi-geo-alt"></i>白银市白银区</li>
          <li><i class="bi bi-geo-alt"></i>白银市白银区</li>
          <li><i class="bi bi-geo-alt"></i>(123) 456-78910</li>
          <li><i class="bi bi-geo-alt"></i>白银市白银区</li>
          <li><i class="bi bi-geo-alt"></i>白银市白银区</li>
      </ul>
      </div>
    </div>
  </div>

  </section>
  <footer class="container-fluid d-table bg-black">
    <p class="text-center text-white d-table-cell align-middle m-0">Mozilla and individual contributors. Content is available under these licenses.</p>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
